<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style type="text/css">
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			body {
				font-size: 12px;
			}
			
			* {
				list-style: none;
				padding: 0px;
				margin: 0px;
			}
			
			a {
				text-decoration: none;
				color: #333333;
			}
			
			a:hover {
				text-decoration: underline;
				cursor: pointer;
			}
			img:hover{
				cursor: pointer;
			}
			#main {
				width: 790px;
				min-height: 500px;
				overflow: hidden;
				clear: both;
				margin: auto;
			}
			
			.h50 {
				height: 50px;
				line-height: 50px;
			}
			
			.ul1 li {
				float: left;
				padding-right: 5px;
			}
			
			.ul1 li a {
				color: #1965B3;
			}
			
			.h30 {
				height: 30px;
				line-height: 30px;
			}
			
			.ul2 li {
				float: left;
				font-weight: bold;
				width: 150px;
				text-align: center;
				padding: 2px 0px;
				background-color: #E4E4E4;
			}
			
			.ul2 li a {
				font-size: 14px;
			}
			
			.ul2 li {
				margin-top: 5px;
			}
			
			.h40 {
				height: 40px;
			}
			
			table a {
				color: #1965B3;
			}
			
			.bc {
				background-color: #E2F2FF;
			}
			
			.bc li {
				float: left;
			}
			
			.h84 {
				width: 240px;
				height: 84px;
				line-height: 20px;
			}
			
			.w80 {
				width: 80px;
				margin: 0px 5px;
			}
			
			.w25 {
				width: 25px;
				text-align: center;
				margin: 0px 5px;
				border: 1px solid #333333;
			}
			
			.tdcolor {
				color: #FE6400;
				font-weight: bold;
			}
			
			.center {
				text-align: center;
			}
			
			.lf {
				text-align: left;
			}
			#tdsum,#jifen{
				font-size: 16px;font-weight: bold;
				color: #FE6400;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div class="h50"><img align="center" src="img1/taobao_logo.gif" /></div>
			<div class="h30">
				<ul class="ul1">
					<li>您的位置:</li>
					<li>
						<a href="#">首页</a>
					</li>
					<li>></li>
					<li>
						<a href="#">我的淘宝</a>
					</li>
					<li>></li>
					<li>我的购物车</li>
				</ul>
			</div>
			<div class="h40">
				<ul class="ul2">
					<li style="background-color: #FF4400;">
						<a href="#" style="color: white;">1.查看购物车</a>
					</li>
					<li>
						<a href="#">2.确认订单信息</a>
					</li>
					<li>
						<a href="#">3.付款到支付宝</a>
					</li>
					<li>
						<a href="#">4.确认收货</a>
					</li>
					<li>
						<a href="#">5.评价</a>
					</li>
				</ul>
			</div>
			<table id="table" border="0" cellspacing="0" cellpadding="0">
				<tr height="30" style="border-bottom: 3px solid #A7CBFF;">
					<th width="50"><input type="checkbox" id="quanxuan" onclick="quanXuan()" />全选</th>
					<th width="350">店铺宝贝</th>
					<th width="80">获积分</th>
					<th width="80">单价（元）</th>
					<th width="100">数量</th>
					<th width="80">小计（元）</th>
					<th width="60">操作</th>
				</tr>

				<tr>
					<td height="30" colspan="7" style="text-indent: 8px;">店铺：
						<a href="#">纤巧百媚时尚鞋坊</a>卖家：
						<a href="#">纤巧百媚</a><img align="center" src="img1/taobao_relation.jpg" /></td>
				</tr>
				<tr height="92" class="bc center">
					<td align="center"><input type="checkbox" name="" id="" value="" /></td>
					<td>
						<ul>
							<li class="w80"><img align="center" src="img1/taobao_cart_01.jpg" /></li>
							<li class="h84 lf">
								<p>
									<a href="#">日韩流行风时尚美眉最爱独特米字拼图金属被公主靴子黑色</a>
								</p>
								<p>颜色：棕色 尺码：37</p>
								<p>保障：<img src="img1/taobao_icon_01.jpg" /></p>
							</li>
						</ul>
					</td>
					<td><strong>5</strong></td>
					<td>138.00</td>
					<td><img onclick="jianNum(this)" src="img1/taobao_minus.jpg" /><input onblur="xiaoJi(this)" class="w25" type="text" value="2" /><img onclick="addNum(this)" src="img1/taobao_adding.jpg" /></td>
					<td class="tdcolor">138</td>
					<td>
						<a onclick="del(this)">删除</a>
					</td>
				</tr>

				<tr height="30">
					<td colspan="7" style="text-indent: 8px;">店铺：
						<a href="#">香港我的美丽日记</a>卖家：
						<a href="#">lokemick2009</a><img align="center" src="img1/taobao_relation.jpg" />
					</td>

				</tr>
				<tr height="92" class="bc center">
					<td align="center"><input type="checkbox" name="" id="" value="" /></td>
					<td>
						<ul>
							<li class="w80"><img align="center" src="img1/taobao_cart_02.jpg" /></li>
							<li class="h84 lf">
								<p>&nbsp</p>
								<p>
									<a href="#">chanel/香奈儿/香奈儿炫高魅力唇膏3.5g</a>
								</p>
								<p>保障：<img src="img1/taobao_icon_01.jpg" /></p>
							</li>
						</ul>
					</td>
					<td><strong>5</strong></td>
					<td>138.00</td>
					<td><img onclick="jianNum(this)" src="img1/taobao_minus.jpg" /><input onblur="xiaoJi(this)" class="w25" type="text" name="" id="" value="2" /><img onclick="addNum(this)" src="img1/taobao_adding.jpg" /></td>
					<td class="tdcolor">138</td>
					<td>
						<a onclick="del(this)">删除</a>
					</td>
				</tr>
				<tr height="30">
					<td colspan="7" style="text-indent: 8px;">店铺：
						<a href="#">实体经营</a>卖家：
						<a href="#">林颜店铺</a><img align="center" src="img1/taobao_relation.jpg" /></td>
				</tr>
				<tr height="92" class="bc center">
					<td align="center"><input type="checkbox" name="" id="" value="" /></td>
					<td>
						<ul>
							<li class="w80"><img align="center" src="img1/taobao_cart_03.jpg" /></li>
							<li class="h84 lf">
								<p>&nbsp</p>
								<p>
									<a href="#">蝶妆海皙蓝清滢粉底10#（象牙白）</a>
								</p>
								<p>保障：<img src="img1/taobao_icon_01.jpg" /><img src="img1/taobao_icon_02.jpg" /></p>
							</li>
						</ul>
					</td>
					<td><strong>5</strong></td>
					<td>138.00</td>
					<td><img onclick="jianNum(this)" src="img1/taobao_minus.jpg" /><input onblur="xiaoJi(this)" class="w25" type="text" name="" id="" value="2" /><img onclick="addNum(this)" src="img1/taobao_adding.jpg" /></td>
					<td class="tdcolor">138</td>
					<td>
						<a onclick="del(this)">删除</a>
					</td>
				</tr>
				<tr height="30">
					<td colspan="7" style="text-indent: 8px;">店铺：
						<a href="#">红豆豆的小屋</a>卖家：
						<a href="#">taobao豆豆</a><img align="center" src="img1/taobao_relation.jpg" /></td>
				</tr>
				<tr height="92" class="bc center">
					<td align="center"><input type="checkbox" name="" id="" value="" /></td>
					<td>
						<ul>
							<li class="w80"><img align="center" src="img1/taobao_cart_04.jpg" /></li>
							<li class="h84 lf">
								<p>
									<a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a>
								</p>
								<p>保障：<img src="img1/taobao_icon_01.jpg" /></p>
							</li>
						</ul>
					</td>
					<td><strong>5</strong></td>
					<td>138.00</td>
					<td><img onclick="jianNum(this)" src="img1/taobao_minus.jpg" /><input onblur="xiaoJi(this)" class="w25" type="text" name="" id="" value="2" /><img onclick="addNum(this)" src="img1/taobao_adding.jpg" /></td>
					<td class="tdcolor">138</td>
					<td>
						<a onclick="del(this)">删除</a>
					</td>
				</tr>
			</table>
			<div class="fr h40" style="line-height: 40px;">商品总价（不含运费）：<span id="tdsum">512</span>元</div>
			<div class="h50" style="margin-top: 40px;">
				<div class="fl "><img onclick="delselect()" src="img1/taobao_del.jpg" /></div>
				<div class="fr">可获取积分<span id="jifen" style="font-size: 16px;font-weight: bold;">44</span>点</div>
				<div class="fr" style="position: relative;top: 40px;right: -88px;"><img src="img1/taobao_subtn.jpg" /></div>
			</div>
		</div>
		<script type="text/javascript">
			var main = document.getElementById("main");
			var table = document.getElementById("table");
			var inputs = table.getElementsByTagName("input");
			var quanxuan = document.getElementById("quanxuan")

			function quanXuan() {
				for(var i = 0; i < inputs.length; i++) {
					if(inputs[i].type == "checkbox") {
						inputs[i].checked = quanxuan.checked;
					}
				}
			}

			function jianNum(t) {
				var td = t.parentNode;
				if(td.children[1].value > 0) {
					td.children[1].value--;
				}
				xiaoJi();
			}

			function addNum(t) {
				var td = t.parentNode;
				td.children[1].value++;
				xiaoJi();
			}

			function xiaoJi() {
				var tr = table.rows;
				var sum = 0;
				var jifen =0;
				for(var i = 1; i < tr.length; i++) {
					if(i %2 ==0){
						var danjia = tr[i].cells[3].innerHTML;
						var shuliang = tr[i].cells[4].children[1].value;
						var jif = tr[i].cells[2].firstElementChild.innerHTML;
						var xiaoji = danjia*shuliang;
						sum += xiaoji;
						jifen += shuliang*jif;
						tr[i].cells[5].innerHTML = xiaoji;
						main.children[4].firstElementChild.innerHTML = sum;
						document.getElementById("jifen").innerHTML = jifen;
					}	
				}
			}
			function del(t){
				var tr = t.parentNode.parentNode;
				
				if(confirm("确认是否删除？")){
					table.children[0].removeChild(tr);
				}
				xiaoJi()
			}
			function delselect(){
				for (var i = inputs.length-1; i > 0; i--) {
					if(inputs[i].checked == 1){
						table.children[0].removeChild(inputs[i].parentNode.parentNode)
					}
				}
			}
			function selectGetSum(){
				for (var i = 0; i < inputs.length; i++) {
					if(inputs[i].checked == 1){
						xiaoJi()
					}
				}
			}
		</script>
	</body>

</html>
